<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管网查询</title>
    <!-- 引入css链接 -->
    <link rel="stylesheet" href="../font/iconfont.css">

    <!-- 引入 css 的CDN -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 js 的CDN -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.min.js"></script>

    <!-- 引入封装的请求 -->
    <script src="../js/gwcx.js"></script>

    <!-- <link rel="stylesheet" href="../css/navigation.css"> -->
    <link rel="stylesheet" href="../css/3-csy.css">

    <!-- 引入css代码（注意修改路径） -->
    <link rel="stylesheet" href="../font/iconfont.css">

    <!-- 使用百度地图api -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=tfD85YZlgokKmLkD4PjZB4lZFxhr4VyK"></script>


</head>

<body>
    <div class="map">

        <!-- 地图容器 -->
        <div id="container"></div>

        <script>
            var map = new BMapGL.Map("container"); // 创建地图实例 
            var point = new BMapGL.Point(113.823024, 34.79473); // 创建点坐标 
            map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
            map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
            map.setHeading(64.5); //设置地图旋转角度
            map.setTilt(73); //设置地图的倾斜角度

            var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
            map.addControl(scaleCtrl);
            var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
            map.addControl(zoomCtrl);

            var marker = new BMapGL.Marker(point); // 创建标注   
            map.addOverlay(marker); // 将标注添加到地图中

            map.setMapStyleV2({
                styleId: '4460912dccb85a7bcfcdd055449b0407'
            });
        </script>

    </div>
    <div class="nav1">
        <div class="nav2"><i>排水管网GIS综合应用系统</i></div>
    </div>
    <div class="nav">
        <div class="navbar"><a href="0.html">首页</a>
            <div class="tri"></div>
        </div>
        <!-- 第一个 -->
        <div class="navbar"><a href="2.html">地图操作</a>
            <div class="tri"></div>
        </div>
        <!-- 第二个 -->
        <div class="navbar" , id="query"><a href="3.html">管网查询</a>
            <div class="tri active"></div>
        </div>
        <!-- 第三个 -->
        <div class="navbar"><a href="4.html">管网统计</a>
            <div class="tri "></div>
        </div>
        <!-- 第四个 -->
        <div class="navbar"><a href="5.html">巡检查询</a>
            <div class="tri"></div>
        </div>
        <!-- 第五个 -->
        <div class="navbar navbar1"><a href="6.html">抢修养护</a>
            <div class="tri"></div>
        </div>
        <!-- 第六个 -->
        <div class="navbar"><a href="7.html">图档管理</a>
            <div class="tri"></div>
        </div>
        <!-- 第七个 -->
        <div class="navbar"><a href="8.html">企业管理</a>
            <div class="tri"></div>
        </div>
        <!-- 第八个 -->
        <div class="navbar"><a href="9.html">窨井管理</a>
            <div class="tri"></div>
        </div>
        <!-- 第九个 -->
        <div class="navbar"><a href="10.html">泵站管理</a>
            <div class="tri"></div>
        </div>

        <div class="tubiao">
            <span class="iconfont icon-shezhixitongshezhigongnengshezhishuxing" id="shezhi"></span>
            <span class="iconfont icon-yonghu" id="yonghu">&nbsp;admin</span>
            <span class="iconfont icon-exit-full" id="exit"></span>
        </div>
        <!-- 第十个 -->
    </div>
    <!-- 指南针 -->
    <div class="compass"></div>
    <div class="compass1"></div>

    <div class="font">
        <div>
            <h4 class="top"><img src="../img/images/图标.png" width="28" class="h4">&nbsp;图层选择</h4>
        </div>
        <div class="bop">
            <div class="one"><input type="checkbox" name="select">
                <div class="diyi1"></div>雨污合流管道</div>
            <div class="two"><input type="checkbox" name="select" checked>
                <div class="diyi2"></div>污水管道</div>
            <div class="three"><input type="checkbox" name="select" checked>
                <div class="diyi3"></div>雨水管道</div>
            <div class="two"><input type="checkbox" name="select" checked><img src="../img/images/10016.png" width="25">&nbsp;排污检修井</div>
            <div class="two"><input type="checkbox" name="select" checked><img src="../img/images/10017.png" width="25">&nbsp;排洪检修井</div>
            <div class="two"><input type="checkbox" name="select"><img src="../img/images/10018.png" width="25">&nbsp;检修井</div>
            <div class="four"><input type="checkbox" name="select"><img src="../img/images/10019.png" width="25">&nbsp;雨篦</div>
            <div class="one"><input type="checkbox" name="select" checked>
                <div class="circle1"></div>&nbsp;污水泵站</div>
            <div class="five"><input type="checkbox" name="select" checked>
                <div class="circle2"></div>&nbsp;污水处理厂</div>
            <div class="six"><input type="checkbox" name="select" checked><img src="../img/images/10020.png" width="25">&nbsp;企业</div>
        </div>
    </div>

    <div class="box">
        <div class="pox">
            <div class="cond " id="line">条件查询
                <div id="heng" class="active">—</div>
            </div>
            <div class="buffer" id="line">缓冲查询
                <div id="heng">—</div>
            </div>
        </div>
        <div class="box1">
            <div class="select">
                <form action="">
                    <table cellspacing="1">
                        <tr>
                            <td>
                                <select name="area">
                                <option>选择区域</option>
                            </select>
                            </td>
                            <td>
                                <select name="type">
                                <option>管网类型</option>
                            </select>
                            </td>
                            <td>
                                <select name="define">
                                <option>自定义字段</option>
                            </select>
                            </td>
                            <td class="def">
                                <span class="text"><span class="iconfont icon-sousuo"><input type="text" placeholder="自定义字段内容" class="search"></span></span>

                                <span class="query"><input type="button" value="查询" class="but"></span>
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <select name="caliber">
                                <option>选择口径</option>
                                <option>1000</option>
                                <option>600</option>
                            </select>
                            </td>
                            <td>
                                <select name="material">
                                <option>选择材质</option>
                                <option>砼</option>
                                <option>HDPE</option>
                            </select>
                            </td>

                            <td colspan="2" , id="sel">
                                <!-- label 结合 input 的id才能使用 -->
                                条件关系：
                                <input type="radio" name="conditions" value="and" id="and" checked>
                                <label for="and">并且</label>&emsp;&emsp;
                                <input type="radio" name="conditions" value="or" id="or">
                                <label for="or">或者</label>
                            </td>

                        </tr>
                    </table>
                </form>
            </div>

            <div class="page">
                <div class="ttt" style="width:977px;overflow-x:auto">

                    <table cellspacing="0" cellpadding="5">
                        <tr class="tit">
                            <td>序号</td>
                            <td>工程编号</td>
                            <td>类型</td>
                            <td>埋设方式</td>
                            <td>所在道路</td>
                            <td>起始点号</td>
                            <td>终止点号</td>
                            <td>地面高程</td>
                            <td>流向</td>
                            <td>口径</td>
                            <td>材质</td>
                            <td>使用年限</td>
                            <td>入库时间</td>
                        </tr>
                    </table>
                </div>
                <div class="yema">
                    <nav aria-label="Page navigation example">
                        <ul class="pagination">
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <!-- <li class="page-item"><a class="page-link" href="#">1</a></li>
                  <li class="page-item"><a class="page-link" href="#">2</a></li>
                  <li class="page-item"><a class="page-link" href="#">3</a></li> -->
                            <!-- <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                    </a>
                  </li> -->
                        </ul>
                    </nav>
                    <input type="button" , value="导出" , class="button">
                </div>

                <script>
                    // 封装渲染表格的函数
                    function tabFun(page, data) {
                        var table = document.getElementsByTagName("table")[1];
                        // 每次渲染都要初始化一下表格，只剩下表头
                        table.innerHTML = `<table border="1" cellspacing="0" cellpadding="5">
                                    <tr class="tit">
                                        <td>序号</td>
                                        <td>工程编号</td>
                                        <td>类型</td>
                                        <td>所在道路</td>
                                        <td>埋设方式</td>
                                        <td>起始点号</td>
                                        <td>终止点号</td>
                                        <td>地面高程</td>
                                        <td>流向</td>
                                        <td>口径</td>
                                        <td>材质</td>
                                        <td>使用年限</td>
                                        <td>入库时间</td>
                                      </tr>
                                    </table>`;
                        // 进行一次判断（三目判断），判断当前页还够不够数据的渲染
                        for (var i = 10 * (page - 1); i < (10 * page <= data.gwcx.length ? 10 * page : data.gwcx.length); i++) {
                            table.innerHTML += `<tr>
                                            <td>${data.gwcx[i].id}</td>
                                            <td>${data.gwcx[i].number}</td>
                                            <td>${data.gwcx[i].type}</td>
                                            <td>${data.gwcx[i].where}</td>
                                            <td>${data.gwcx[i].buried}</td>
                                            <td>${data.gwcx[i].start}</td>
                                            <td>${data.gwcx[i].end}</td>
                                            <td>${data.gwcx[i].height}</td>
                                            <td>${data.gwcx[i].direction}</td>
                                            <td>${data.gwcx[i].caliber}</td>
                                            <td>${data.gwcx[i].material}</td>
                                            <td>${data.gwcx[i].life}</td>
                                            <td>${data.gwcx[i].time}</td>
                                        </tr>`;
                        }
                    }

                    ajaxFun("../json/data.json", function(data) {
                        data = JSON.parse(data);
                        console.log(data);
                        // 规定一页展示几条数据 10

                        // 得到总的数据数
                        var num = data.gwcx.length;
                        console.log(num);
                        // 根据总的数据数得到页数
                        var pageNum = Math.ceil(num / 10);
                        console.log(pageNum);
                        // 获取分页元素
                        var pagination = document.getElementsByClassName("pagination")[0];
                        // 循环渲染
                        for (var i = 1; i <= pageNum; i++) {
                            pagination.innerHTML += `<li class="page-item"><a class="page-link" href="#">${i}</a>`
                        }
                        pagination.innerHTML += `<li class="page-item">
                                              <a class="page-link" href="#" aria-label="Next">
                                                <span aria-hidden="false">&raquo;</span>
                                              </a>
                                            </li>`;

                        tabFun(1, data);
                        // 获取所有的分页元素
                        var pageItem = document.getElementsByClassName("page-link");
                        // 循环事件绑定（避开了上一页和下一页）
                        for (var j = 1; j < pageItem.length - 1; j++) {
                            pageItem[j].onclick = function() {
                                console.log(this.innerHTML);

                                // 调用渲染的函数，进行数据的渲染
                                tabFun(this.innerHTML, data);
                            }
                        }


                        // 搜索部分
                        // 获取搜索框和搜索按钮
                        var inp = document.getElementsByClassName("search")[0];
                        var btn = document.getElementsByClassName("but")[0];

                        // 准备一个空数组，用来保存符合搜索条件的数据
                        var newData = [];

                        btn.onclick = function() {
                            var table = document.getElementsByTagName("table")[1];
                            console.log(table);
                            table.innerHTML = `<table border="1" cellspacing="0" cellpadding="5">
                                                    <tr class="tit">
                                                        <td>序号</td>
                                                        <td>工程编号</td>
                                                        <td>类型</td>
                                                        <td>所在道路</td>
                                                        <td>埋设方式</td>
                                                        <td>起始点号</td>
                                                        <td>终止点号</td>
                                                        <td>地面高程</td>
                                                        <td>流向</td>
                                                        <td>口径</td>
                                                        <td>材质</td>
                                                        <td>使用年限</td>
                                                        <td>入库时间</td>
                                                    </tr>
                                                </table>`;

                            // 拿到输入框的内容
                            console.log(data.gwcx);

                            // 遍历对应的数据
                            for (var i = 0; i < data.gwcx.length; i++) {
                                // 对象的遍历
                                for (var key in data.gwcx[i]) {
                                    // console.log(key);
                                    // 可以拿到对应的值
                                    console.log(data.gwcx[i][key]);

                                    // 将值和搜索框的内容进行比对
                                    if (data.gwcx[i][key].toString().includes(inp.value)) {
                                        newData.push(data.gwcx[i]);
                                        // 只要发现有符合所搜条件的内容，就直接终止遍历
                                        break;
                                    }
                                }
                            }

                            console.log(newData);
                            // tabFun(page, newData);

                            // 拿着符合条件的数据进行页面渲染
                            for (var i = 0; i < newData.length; i++) {

                                table.innerHTML += `<tr>
                                            <td>${newData[i].id}</td>
                                            <td>${newData[i].number}</td>
                                            <td>${newData[i].type}</td>
                                            <td>${newData[i].where}</td>
                                            <td>${newData[i].buried}</td>
                                            <td>${newData[i].start}</td>
                                            <td>${newData[i].end}</td>
                                            <td>${newData[i].height}</td>
                                            <td>${newData[i].direction}</td>
                                            <td>${newData[i].caliber}</td>
                                            <td>${newData[i].material}</td>
                                            <td>${newData[i].life}</td>
                                            <td>${newData[i].time}</td>
                                        </tr>`;
                            }

                        }


                    })
                </script>

            </div>



        </div>
    </div>
    <div class="tubiaobottom">
        <span class="iconfont icon-sousuo" id="sousuo"></span>
        <span class="iconfont icon-jia" id="jia"></span>
        <span class="iconfont icon-jianhao" id="jiahao"></span>
        <span><img src="../img/images/10010.png" alt=""></span>
        <span class="iconfont icon-fangzi1" id="fangzi"></span>
        <span class="iconfont icon-full-screen" id="jiantou"></span>
    </div>
</body>

</html>